<template>
  <div>
      <nav-header></nav-header>   
      <nav-bread>
        <span>Goods</span>
      </nav-bread>
      <div class="accessory-result-page accessory-page">
        <div class="container">
          <div class="filter-nav">
            <span class="sortby">Sort by:</span>
            <a href="javascript:void(0)" class="default cur">Default</a>
            <a href="javascript:void(0)" class="price" @click="sortGoods">
              Price 
              <svg class="icon icon-arrow-short">
                <use xlink:href="#icon-arrow-short"></use>
              </svg>
            </a>
            <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>  
            <!-- 右侧响应式弹框 -->
          </div>
          <div class="accessory-result">
            <!-- filter -->
            <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filtershow}">
              <dl class="filter-price">
                <dt>Price:</dt>
                <dd><a href="javascript:void(0)" v-bind:class="{'cur':priceChecked=='all'}" @click="setPriceFilter('all')">All</a></dd>
                <dd v-for="(price,index) in PriceFilter" :key="index"  @click="setPriceFilter(index)">
                  <a v-bind:class="{'cur':priceChecked==index}">{{price.startPrice}} - {{price.endPrice}}</a>
                </dd>
              </dl>
            </div>

            <!-- search result accessories list -->
            <div class="accessory-list-wrap">
              <div class="accessory-list col-4">
                <ul>
                  <li v-for="item in goodsList" :key="item.id">
                    <div class="pic">
                      <a href="#"><img v-lazy="'./../../static/'+item.productImage" alt=""></a><!-- 图片懒加载在main.js导入插件，在这里用v-lazy -->
                    </div>
                    <div class="main">
                      <div class="name">{{item.productName}}</div>
                      <div class="price">{{item.salePrice}}</div>
                      <div class="btn-area">
                        <a href="javascript:;" class="btn btn--m" @click = "addCart(item.productId)">加入购物车</a>
                      </div>
                    </div>
                  </li>
                </ul>
                <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30" style="text-align: center; margin-bottom: 5px;">
                  加载中... 
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
      <modal v-bind:mdShow="mdShow" v-on:close="closeModal">
        <p slot="message">
          请先登录，否则无法加入到购物车中
        </p>
        <div slot="btnGroup">
          <a class="btn btn--m" href="javascript:void(0)" @click="mdShow = false">关闭</a>
        </div>
      </modal>
      <modal v-bind:mdShow="mdShowCart" v-on:close="closeModal">
        <p slot="message">
          <svg class="icon-status-ok">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
          </svg>
          <span>加入购物车成功</span>
        </p>
        <div slot="btnGroup">
          <a class="btn btn--m" href="javascript:void(0)" @click="mdShowCart = false">继续购物</a>
          <router-link class="btn btn--m" href="javascript:void(0)" to="/cart">查看购物车</router-link> 
        </div>
      </modal>
      <nav-footer></nav-footer>
  </div>
</template> 
<script>
  import NavHeader from './../components/NavHeader.vue'
  import NavFooter from './../components/NavFooter.vue'
  import NavBread from './../components/NavBread.vue'
  import Modal from './../components/Modal.vue'
  import axios from 'axios'

  export default{
    data(){
      return{
        goodsList:[],
        sortFlag:true,
        page:1,
        pageSize:8,
        busy:true,
        mdShow:false,
        loading:true,
        mdShowCart:false,
        priceChecked:'all',
        PriceFilter:[
          {
            startPrice:'0',
            endPrice:'100'
          },
          {
            startPrice:'100',
            endPrice:'500'
          },
          {
            startPrice:'500',
            endPrice:'1000'
          },
          {
            startPrice:'1000',
            endPrice:'2000'
          }
        ],
        filtershow:false,
        overLayFlag:false
      }
    },
    components:{
      NavHeader:NavHeader,
      NavFooter:NavFooter,
      NavBread:NavBread,
      Modal:Modal
    },
    mounted:function(){
      this.getGoodsList();
    },
    //初始化相当于是window.onload()
    // computed:function(){
    //   this.getGoodsList()
    // },
    methods:{
      showFilterPop(){
        this.filtershow = true;
        this.overLayFlag = true;
      },
      setPriceFilter(index){
        this.priceChecked = index;
        this.page=1;
        this.getGoodsList();
        this.closePop();
      },
      closePop(){
        this.filtershow = false;
        this.overLayFlag = false;
      },
      getGoodsList(flag){
        var param = {
          page:this.page,
          pageSize:this.pageSize,
          sort:this.sortFlag?1:-1,
          priceLevel:this.priceChecked
        }
        this.loading = true;
        axios.get("/goods/list",{
          params:param
        }).then((response)=>{
        let res = response.data;
        this.loading = false;
        if(res.status == "0"){
          if(flag){
            this.goodsList = this.goodsList.concat(res.result.list);
            if(res.result.count==0){
              this.busy = true;  
              // 0条滚动加载关闭
            }else{
              this.busy = false;
            }
          }else{
            this.goodsList = res.result.list;
            this.busy = false;
          }
        }else{
          this.goodsList = [];
        }
      });
      },
      // 排序
      sortGoods(){
        this.sortFlag = !this.sortFlag;
        this.page = 1;
        this.getGoodsList(); 
      },
      //鼠标动调用的方法
      loadMore(){
        this.busy = true;
        setTimeout(() => {
          this.page++;
          this.getGoodsList(true);
        }, 500);
      },
      addCart(productId){
        axios.post("/goods/addCart",{
          productId:productId
        }).then((response)=>{
          let res = response.data;
          if(res.status == 0){
            this.mdShowCart = true;
            this.$store.commit("updatecartCount",1);
          }else{
            console.log(res.msg);
            this.mdShow = true;
          }
        });
      },
      closeModal(){
        this.mdShow = false;
      }
    } 
  }
</script>
<style type="text/css">
  .btn:hover{
    background-color: #ffe5e6;
    transition: all .3s ease-out
  }
</style>